<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../js/vue.js"></script>
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
</head>
<style>

</style>

<body>

<div id="app">
    <el-input v-model="searchText" placeholder="请输入搜索内容" style="width: 200px"  @keyup.enter="handleSearch"></el-input>
    <el-select v-model="searchType" placeholder="选择搜索类型" style="width: 150px">
        <el-option label="按书名搜索" value="name"></el-option>
        <el-option label="按作者搜索" value="author"></el-option>
        <el-option label="按分类搜索" value="type"></el-option>
        <el-option label="按书籍号搜索" value="card"></el-option>
    </el-select>
    <el-button type="primary" @click="handleSearch">搜索</el-button>

    <el-table style="padding: 20px"
              :data="tableData"
              stripe
    >
        <el-table-column
                prop="name"
                label="书籍名"
        >
        </el-table-column>
        <el-table-column
                prop="card"
                label="书籍号"
        >
        </el-table-column>

        <!-- 新增：借阅人姓名列 -->
        <el-table-column
                prop="userName"
                label="借阅人姓名"
        >
        </el-table-column>

        <el-table-column
                prop="author"
                label="作者"
        >
        </el-table-column>
        <el-table-column
                prop="num"
                label="数量"
        >
        </el-table-column>
        <el-table-column
                prop="press"
                label="出版社"
        >
        </el-table-column>
        <el-table-column
                prop="type"
                label="分类类型"
        >
        </el-table-column>
        <el-table-column label="状态">
            <template slot-scope="scope">
                <span>借阅中</span>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            :current-page.sync="page"
            @current-change="handleCurrentChange"
    ></el-pagination>
</div>

</body>

<script>
    let myVue = new Vue({
        el: '#app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                addBookDialogVisible: false,
                editBookDialogVisible:false,
                addBookForm: {
                    bid: '',
                    name: '',
                    card: '',
                    author: '',
                    num: '1',
                    press: '',
                    type: ''
                },
                bookCategories: [],
                selectedRows: [],
                searchText: '',
                searchType: 'name',
            }
        },
        created() {
            this.init();
        },
        methods: {
            async init() {
                let params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    status: '1'
                };

                if (this.searchText) {
                    if (this.searchType === 'name') {
                        params.name = this.searchText;
                    } else if (this.searchType === 'author') {
                        params.author = this.searchText;
                    } else if (this.searchType === 'type') {
                        params.type = this.searchText;
                    } else if (this.searchType === 'card') {
                        params.card = this.searchText;
                    }
                }

                axios.get("/book_info/page", {params})
                    .then(res => {
                        this.tableData = res.data.data.records;
                        this.counts = res.data.data.total;
                    })
            },
            handleQuery() {
                this.page = 1;
                this.init();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.init();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.init();
            },
            handleSearch() {
                this.page = 1;
                this.init();
            },
        }
    })
</script>

</html>